<template>
	<swiper class="carousel-container" previous-margin="90rpx" next-margin="90rpx" :circular="false"
		:autoplay="autoplay" @change="swiperChange" :indicator-dots="false" :indicator-color="indicatorColor"
		:indicator-active-color="indicatorActiveColor" :current="currentIndex">
		<swiper-item :class="currentIndex == index ? 'carousel-item' : 'carousel-item-side'"
			v-for="(item, index) in cardList" :key="index">
			<view class="card-wrapper">
				<view class="card-bg">
					<image :src="item.background" mode="aspectFill"></image>
				</view>
				<view class="card-content">
					<view class="card-title">{{ item.title }}</view>
					<view class="coin-details">
						<text class="total-coins">{{ item.totalCoins }} COINS:</text>
						<view class="coin-breakdown">
							<view class="coin-item">
								<view style="display: flex; align-items: center;">
									<text class="coin-number">{{ item.instantCoins }}</text>
									<image class="coin-icon-small" :src="coinIcon" mode="aspectFit"></image>
								</view>
								<text class="coin-label">{{ item.instantLabel }}</text>
							</view>
							<view class="coin-item">
								<view style="display: flex; align-items: center;">
									<text class="coin-number">+{{ item.dailyCoins }}</text>
									<image class="coin-icon-small" :src="coinIcon" mode="aspectFit"></image>
								</view>
								<text class="coin-label">{{ item.dailyLabel }}</text>
							</view>
						</view>
						<view class="price-btn" @click.stop="clickCard(item, index)">
							<text class="price-text">{{ item.priceText }}</text>
						</view>
					</view>
				</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name: "subscription-carousel",
		props: {
			cardList: {
				type: Array,
				default () {
					return []
				}
			},
			autoplay: {
				type: Boolean,
				default () {
					return true
				}
			},
			indicatorColor: {
				type: String,
				default () {
					return 'rgba(255, 255, 255, 0.3)'
				}
			},
			indicatorActiveColor: {
				type: String,
				default () {
					return '#FFFFFF'
				}
			},
			coinIcon: {
				type: String,
				default () {
					return '/static/coin-icon.png'
				}
			}
		},
		data() {
			return {
				currentIndex: 1, // 默认显示第二张卡片（中间位置）
				dontFirstAnimation: true
			}
		},
		mounted() {
			// 组件挂载后，延迟关闭首次动画
			setTimeout(() => {
				this.dontFirstAnimation = false
			}, 100)
			console.log("cardList",this.cardList)
		},
		methods: {
			swiperChange(e) {
				this.dontFirstAnimation = false
				this.currentIndex = e.detail.current
				// 触发change事件，传递当前索引
				this.$emit('change', e.detail.current, this.cardList[e.detail.current])
			},
			clickCard(item, index) {
				// 点击卡片方法：传递selected到父组件
				this.$emit('selected', item.did, item.productId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carousel-container {
		width: 750rpx;
		height: 400rpx;
	}

	.carousel-item {
		width: 600rpx;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.carousel-item-side {
		width: 600rpx;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.carousel-item .card-wrapper {
		width: 95%;
		height: 354rpx;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.carousel-item-side .card-wrapper {
		width: 85%;
		height: 300rpx;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.card-wrapper::before {
		content: '';
		position: absolute;
		top: 0;
		left: -60%;
		width: 60%;
		height: 100%;
		background: linear-gradient(90deg,
				transparent,
				rgba(255, 255, 255, 0.1) 10%,
				rgba(255, 255, 255, 0.2) 15%,
				rgba(255, 255, 255, 0.1) 20%,
				transparent 25%,
				transparent 40%,
				rgba(255, 255, 255, 0.1) 45%,
				rgba(255, 255, 255, 0.2) 50%,
				rgba(255, 255, 255, 0.1) 55%,
				transparent 60%,
				transparent 75%,
				rgba(255, 255, 255, 0.1) 80%,
				rgba(255, 255, 255, 0.2) 85%,
				rgba(255, 255, 255, 0.1) 90%,
				transparent);
		animation: lightSweep 3s ease-in-out infinite;
		z-index: 2;
		pointer-events: none;
	}

	.card-wrapper:hover {
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.4);
	}

	.card-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.card-bg image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.card-content {
		position: relative;
		z-index: 3;
		top: 0;
		left: 0;
		padding: 0rpx 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.card-title {
		padding-top: 30rpx;
		font-weight: 600;
		font-size: 36rpx;
		text-shadow: -3px 5px 4px #F7A962;
	}

	.card-illustration {
		text-align: center;
	}

	.character-img {
		width: 140rpx;
		height: 140rpx;
		margin: 20rpx 0;
	}

	.coin-details {
		position: relative;
		bottom: 20rpx;
		left: 100rpx;
	}

	.total-coins {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		display: block;
		margin-top: 20rpx;
	}

	.coin-breakdown {
		display: flex;
		justify-content: space-around;
		gap: 40rpx;
		margin-bottom: 20rpx;
	}

	.coin-item {
		display: flex;
		flex-direction: column;
		gap: 5rpx;
	}

	.coin-number {
		color: white;
		font-size: 32rpx;
		font-weight: bold;
	}

	.coin-icon-small {
		width: 35rpx;
		height: 38rpx;
		margin-left: 4rpx;
	}

	.coin-label {
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #EA8D4A;
		padding: 4rpx 14rpx;
		border-radius: 20rpx;
		font-weight: bold;
	}

	.price-btn {
		background-image: url('/static/pricebtn.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 25rpx;
		padding: 10rpx 40rpx;
		margin-top: 20rpx;
		transition: all 0.3s ease;
		border: none;
		text-align: center;
	}

	.price-btn:active {
		transform: scale(0.95);
		text-align: center;
	}

	.price-text {
		color: white;
		font-size: 32rpx;
		font-weight: bold;
	}

	@keyframes to-mini {
		from {
			height: 400rpx;
		}

		to {
			height: 320rpx;
		}
	}

	@keyframes to-big {
		from {
			height: 320rpx;
		}

		to {
			height: 400rpx;
		}
	}

	@keyframes lightSweep {
		0% {
			left: -60%;
		}

		100% {
			left: 100%;
		}
	}
</style>